<template>
    <div class="goods">
        <div class="goods_list">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item v-for="(item, i) in goodsData" :key="item.name" :title="item.name"
                    @click="leftClick(i)" />
            </van-sidebar>

        </div>
        <div class="goods_right">
            <div>
                <div :id="'tab' + i" v-for="(item, i) in goodsData" :key="i">
                    <div class="ht">{{ item.name }}</div>
                    <div v-for="child in item.foods" :key="child.id">
                        <van-card :price="child.price" :title="child.name" :thumb="child.imgUrl"
                            @click-thumb="godetail(child)">
                            <template #tags>
                                <van-tag plain type="danger">月销{{ child.rating }}</van-tag>
                                <van-tag plain type="danger">好评率{{ child.sellCount }}</van-tag>

                            </template>
                            <template #footer>
                                <template v-if="isid(child.id)">
                                    <div>
                                        <van-button size="mini" @click="addsub('+',child.id)">+</van-button>
                                        {{cartCount(child.id)}}
                                        <van-button size="mini" @click="addsub('-',child.id)">-</van-button>
                                    </div>

                                </template>
                                        <van-button size="mini" v-else @click="setcart(child)">添加购物车</van-button>
                            </template>
                        </van-card>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts">
import BetterScroll from 'better-scroll';
import { GoodsEntity } from './goods';
import { GoodTwo, GoodsList } from '../../api/model/goods';
import { api_goodquery } from '../../api/goods';
// 导入混合mixin
import cardMixin from '../../mixins/cardMixin';
export default defineComponent({
    setup() {
        const dataSoure = reactive(new GoodsEntity());

        let leftScroll: BetterScroll;
        let rightScroll: BetterScroll;

        const query = async () => {
            let rst = await api_goodquery();
            console.log(rst);
            // 这里会报错就是api忘记写Array了
            dataSoure.goodsData = rst.data;
            // 当数据一旦渲染到dom(浏览器页面内容)后才执行函数
            nextTick(() => {
                leftScroll = new BetterScroll(document.querySelector(".goods_list") as any, {
                    click: true,
                    // disableMouse: true, //启用鼠标滚动
                    // disableTouch: true,  //启用手指触摸
                    // probeType: 3 //决定是否派发 scroll 事件
                    // 1. probeType 为 0，在任何时候都不派发 scroll 事件，
                    // 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
                    // 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
                    // 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画

                });
                rightScroll = new BetterScroll(document.querySelector(".goods_right") as any, {

                    probeType: 3,
                    click: true,

                    pullUpLoad: true,




                })
                rightScroll.on("scroll", (pos: any) => {
                    console.log(pos);
                    let y = Math.abs(pos.y);
                    let total: number = 0;
                    heightArr.value.forEach((divheight: number | any, index) => {
                        if (y >= total && y < total + divheight) {
                            activeKey.value = index;
                        }
                        total += divheight;
                    })
                    console.log(pos);

                })

            });


        }
        onMounted(() => {
            query();
        })
        // 侧边栏导航
        let activeKey = ref(0);
        const changeLeft = (index: number) => {
            activeKey.value = index;
        }
        // 如果点击左边导航右边不动，看右边是不是被一个父级div包裹，不然就动不了
        const leftClick = (i: number) => {
            console.log(i);
            let s = document.getElementById('tab' + i);
            rightScroll.scrollToElement(s as any, 600, 0, 0);
        }
        // 计算所有楼层高度，然后将楼层高度放在一个数组里
        let heightArr = computed(() => {
            let hs: Array<number | undefined> = [];
            dataSoure.goodsData.forEach((item, i) => {
                hs.push(document.getElementById("tab" + i)?.offsetHeight);
            });
            return hs
        })
        const router = useRouter();
        const godetail = (foods: GoodsList | any) => {
            router.push({
                path: "/goodsdetail",
                query: {
                    id: JSON.stringify(foods)
                }
            })
        }

        const { setcart, isid, addsub, cartCount } = cardMixin();
        return { ...toRefs(dataSoure), activeKey, changeLeft, leftClick, godetail, setcart, isid, addsub, cartCount }
    }

})

</script>

<style lang="scss" scoped>
.goods {
    display: flex;
    height: 100%;

    .goods_list {
        flex: 0 0 90px;
        overflow: scroll;

    }

    .goods_right {
        flex: 1;
        background-color: #ddd;
        overflow: scroll;

        ::v-deep(.van-card__title) {
            font-size: 15px;
        }

        ::v-deep(.van-card__price) {
            color: rgb(231, 74, 74);
            font-weight: 600;
        }

        ::v-deep(.van-tag) {
            margin-top: 10px;
        }

        .ht {
            margin: 10px;
            color: cadetblue;
        }
    }

}
</style>